<template>
    <div class="el-card box-card ">
     <div class="el-card_header">
       <div class="clearfix">
         <span>学生来源</span>
         <!-- 下拉 -->
         <el-select v-model="value" placeholder="近15天">
         <el-option
         v-for="item in options"
         :key="item.value"
         :label="item.label"
         :value="item.value">
         </el-option>
         </el-select>
       </div>
     </div>
     <div class="el-card_body" ref="box"></div>
    </div>
 </template>
 
 <script setup>
 import { ref, reactive, toRefs, onMounted} from 'vue'
 import echarts from "echarts";
 
 let options=[{ 
           value: '选项1',
           label: '近一周'
         }, {
           value: '选项2',
           label: '近15天'
         }, {
           value: '选项3',
           label: '近30天'
         }, {
           value: '选项4',
           label: '自定义'
         }
 ] 
           
  let value=ref('')     
 
  let box=ref(null)
  let myechart
 onMounted(()=>{ 
   myechart=echarts.init(box.value)
     renderChart()
 });
 const renderChart=()=>{ 
   const options={ 
       series:{ 
        name:'学生来源',
        type:'pie',
        color:['#8ac4eb','#98da8f','#00a4af','#84a2d5'],
        data:[ 
          {value:'1',name:'转介绍'},
          {value:'2',name:'电话邀约'},
          {value:'1',name:'抖音'},
          {value:'8',name:'其他'}
        ]
       },
       legend:{ 
        left:"left",
        orient:"verical",
        left:'20px',
        top:'10px'
       }
       
   }
   
   myechart.setOption(options)
 }
 
 
 </script>
 <style scoped lang="scss">
 .el-card{ 
   background-color: transparent;
   border-radius: 4px;
     border: 1px solid #e6ebf5;
     background-color: #fff;
     color: #303133;
     
     
     .el-card_header{ 
       height: 65px;
     padding: 18px 20px;
     border-bottom: 1px solid #e6ebf5;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     }
     .el-select{ 
       margin-left: 10px;
     }
     .el-card_body{ 
       height: 400px;
       width: 550px;
     }
 }
 
 
 
 </style>